<template>
  <div class="supplement-info-box">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
      <dg-row type="flex" class="row-bg" justify="space-between">
        <dg-col :span="10">
          <el-form-item label="批示人" prop="psrId">
            <dg-select value-name="id" label-name="name" v-model="form.psrId" :data="approvalers"> </dg-select>
          </el-form-item>
        </dg-col>
        <dg-col :span="10">
          <el-form-item label="批示时间" prop="pssj">
            <el-date-picker
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.pssj"
              type="datetime"
              placeholder="请选择"
            />
          </el-form-item>
        </dg-col>
      </dg-row>
      <div>
        <el-form-item label="批示内容" prop="psnr">
          <el-input v-model="form.psnr" type="textarea" :rows="6" maxlength="2000" show-word-limit />
        </el-form-item>
      </div>
      <el-button class="btn-supplement" type="primary" @click="onSubmit">补录</el-button>
    </el-form>

    <module-card class="cy-table">
      <template #header>补录</template>
      <comm-table
        ref="table"
        class="table"
        :defaultSort="{
          prop: 'createTime',
          order: 'descending'
        }"
        :condition="condition"
        :columns="columns"
        url="/v1/flowReplenishInfo/search"
      >
        <template slot-scope="{ row }">
          <dg-button type="text" @click="onDelete(row)">删除</dg-button>
        </template>
      </comm-table>
    </module-card>
  </div>
</template>

<script>
import { saveFlowReplenishInfo, deleteFlowReplenishInfo, getApprovalers } from '@/api/common';

export default {
  name: 'SupplementInfo',
  data() {
    return {
      form: {},
      approvalers: [],
      rules: {
        psrId: [{ required: true, message: '请输入批示人', trigger: 'blur' }],
        psnr: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      columns: [
        { label: '序号', type: 'index' },
        { label: '批示人', prop: 'psrName' },
        { label: '批示时间', prop: 'pssj' },
        { label: '批示内容', prop: 'psnr' },
        { label: '补录人', prop: 'createUserName' },
        { label: '补录时间', prop: 'createTime' },
        { label: '操作', type: 'operate' }
      ]
    };
  },
  computed: {
    flowId() {
      return this.$route.params.id || '';
    },
    condition() {
      return {
        flowId: {
          value: this.flowId,
          op: '='
        }
      };
    }
  },
  mounted() {
    getApprovalers().then(({ data }) => {
      this.approvalers = data;
    });
  },
  methods: {
    async onSubmit() {
      const valid = await new Promise((resolve) => this.$refs.ruleForm.validate(resolve));
      if (!valid) return;
      const params = {
        ...this.form,
        psrName: this.approvalers.find((v) => v.id === this.form.psrId).name,
        flowId: this.flowId
      };
      saveFlowReplenishInfo(params).then((res) => {
        this.$message({
          message: '补录成功',
          type: 'success'
        });
        this.form = {};
        this.$refs.table.searchForm();
      });
    },
    /**
     * 删除补录列
     */
    onDelete(row) {
      this.$confirm('此操作将删除数据, 是否继续?').then(() => {
        deleteFlowReplenishInfo(row.id).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.$refs.table.searchForm();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.cy-table {
  margin-top: 20px;
}
.btn-supplement {
  margin-left: 80px;
}
</style>
